import React, { useState, useEffect } from 'react';
import Router, { withRouter } from '@/router/renderRouter';
import { Card, Icon, Col, Row, Button, InputNumber, Input, Modal, message, Divider } from 'antd';
import './index.scss';
import { transferUppercase, Copy, formatBalance, authPermissions } from '@/utils/utils';

import { 
  queryRechargeByOrderNo,
  auditPass,
  auditReject,
} from '@/api/trans'


const PaymentDetail = (props) => {
  const { TextArea } = Input;
  const { confirm } = Modal;
  const [edit, setEdit] = useState(false)
  const [loading, setLoading] = useState(false)
  const [detail, setDetail] = useState(false)
  const [fee, changeFee] = useState(null)
  const [remark, changeRemark] = useState('')
  
  const filterStatus = (value: any) => {
    switch (value) {
      case 1:
        return '审核中';
        break;
      case 2:
        return '交易成功';
        break;
      default:
        return '交易失败';
        break;
    }
  };
  const back = () => {
    props.back();
  }
  
  const getDetail = async () => {
    console.log(props.detailParams)
    try {
      let params = {
        orderNo: props.detailParams.id
      }
      setLoading(true)
      let res = await queryRechargeByOrderNo(params)
      if(res.code === 0) {
        setDetail(res.data)
      }
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  };
  
  
  const handlePass = async () => {
    try {
      if(!fee && fee!==0){
        message.warning('请输入手续费')
        return false;
      }
      if(!remark){
        message.warning('请输入审核意见')
        return false;
      }
      let params = {
        orderNo: props.detailParams.id,
        fee,
        auditOpinion: remark,
        userType: '1',
      }
      console.log(params)
      setLoading(true)
      let res = await auditPass(params)
      if(res.code === 0) {
        message.success('审核成功')
        getDetail()
      }
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  }
  const handleRefuse = async () => {
    try {
      if(!remark){
        message.warning('请输入审核意见')
        return false;
      }
      let params = {
        orderNo: props.detailParams.id,
        auditOpinion: remark,
        userType: '1',
      }
      setLoading(true)
      let res = await auditReject(params)
      if(res.code === 0) {
        message.success('审核成功')
        getDetail()
      }
      setLoading(false)
    } catch (error) {
      console.log(error)
    }
  }
  
  // 首次更新
  useEffect(() => {
    setEdit(props.detailParams.edit)
    getDetail()
    return () => { 
    };
  // eslint-disable-next-line react-hooks/exhaustive-deps
  } , [])
  
  return (
    <>
      <div className="main">
        <Button style={{marginBottom: "15px"}} onClick={()=>{back()}}>返回</Button>
        <div>
          <Card loading={loading} className="filterContainer">
            <h3 className="topTitle">
              <Icon type="project" className="icon" />
              订单编号：{detail.orderNo}
            </h3>
            <div className="detailContent">
              <Row gutter={16}>
                <Col xl={24} className="mb10">
                  <span className="itemLabel">用户名：</span>
                  <span>{detail.account}</span>
                </Col>
              </Row>
              <Row gutter={16}>
                <Col xl={8} className="mb10">
                  <span className="itemLabel">申请时间：</span>{' '}
                  {detail.applyTime || '--'}
                </Col>
                <Col xl={8} className="mb10">
                  <span className="itemLabel">到账时间：</span>
                  {detail.receiptTime || '--'}
                </Col>
              </Row>
              <Row gutter={16}>
                <Col xl={8} className="mb10">
                  <span className="itemLabel">存款金额：</span>
                  <span className="font20 redColor mr10 fontW">
                    {detail.applyAmount ? formatBalance(detail.applyAmount, 3) : '--'}
                  </span>
                </Col>
                <Col xl={8} className="mb10">
                  <span className="itemLabel">大写金额：</span>
                  {detail.applyAmount ? transferUppercase(detail.applyAmount) : '--'}
                </Col>
                <Col xl={8} className="mb10">
                  <span className="itemLabel">状态：</span>
                  <span className="font20">
                    {detail.transStatus ? filterStatus(detail.transStatus) : '--'}
                  </span>
                </Col>
              </Row>
            </div>
          </Card>
          <Card loading={loading} title="交易信息" className="filterContainer">
            <Row gutter={16}>
              <Col xl={8} className="mb10">
                <span className="itemLabel">交易银行：</span>{' '}
                {detail.transName || '--'}
              </Col>
              <Col xl={8} className="mb10">
                <span className="itemLabel">收款地址：</span>{' '}
                {detail.transAddress || '--'}
              </Col>
              <Col xl={8} className="mb10">
                <span className="itemLabel">存款金额：</span>{' '}
                {formatBalance(detail.applyAmount, 3)}
              </Col>
            </Row>
            {
              detail.transName&&detail.transName.indexOf('USDT') !== -1
              ?
              <Row gutter={16}>
                <Col xl={8} className="mb10">
                  <span className="itemLabel">交易汇率：</span>{' '}
                  {(detail.usdtRate || detail.usdtRate===0) ? detail.usdtRate : '--'}
                </Col>
                <Col xl={8} className="mb10">
                  <span className="itemLabel">区块链协议：</span>{' '}
                  {'--'}
                </Col>
                <Col xl={8} className="mb10">
                  <span className="itemLabel">USDT数量：</span>{' '}
                  {formatBalance(detail.usdtNumber, 3)}
                </Col>
              </Row>
              :
              ''
            }
          </Card>
          {/* <Card loading={loading} title="支付信息" className="filterContainer">
            <Row gutter={16}>
              <Col xl={8} className="mb10">
                <span className="itemLabel">商户账号：</span> {' '}
                {detail.account || '--'}
              </Col>
              <Col xl={8} className="mb10">
                <span className="itemLabel">商户编号：</span>{' '}
                {detail.userCode || '--'}
              </Col>
              <Col xl={8} className="mb10">
                <span className="itemLabel">申请时间：</span>{' '}
                {detail.applyTime || '--'}
              </Col>
              <Col xl={8} className="mb10">
                <span className="itemLabel">客户备注：</span>{' '}
                {detail.remark || '--'}
              </Col>
            </Row>
          </Card> */}
          <Card loading={loading} title="操作信息" className="filterContainer">
            <Row gutter={16}>
              <Col xl={8} className="mb10">
                <span className="itemLabel">审核员：</span>{' '}
                {detail.operator || '--'}
              </Col>
              <Col xl={8} className="mb10">
                <span className="itemLabel">审核时间：</span>{' '}
                {detail.operatorTime || '--'}
              </Col>
            </Row>
            {
              // <Row gutter={16}>
              //   <Col xl={8} className="mb10">
              //     <span className="itemLabel">申领人：</span>{' '}
              //     {detail.checkUser || '--'}
              //   </Col>
              //   <Col xl={8} className="mb10">
              //     <span className="itemLabel">申领时间：</span>{' '}
              //     {detail.receiveTime || '--'}
              //   </Col>
              // </Row>
            }
            <Row gutter={16}>
              <Col xl={8} className="mb10">
                <span className="itemLabel">手续费：</span>
                {((detail.transStatus === 1) && edit ===true)  ?
                   <InputNumber
                     precision={0}
                     step={1}
                     min={0}
                     max={detail.arrivedAmount}
                     defaultValue={0}
                     onChange={(e) => {changeFee(e)}}
                   />
                   : 
                   ('' + formatBalance(detail.fee, 5)
                )}
              </Col>
              {
                detail.transName&& detail.transName.indexOf('USTD') === -1?
                <Col xl={8} className="mb10">
                  <span className="itemLabel">实际充值金额：</span>{' '}
                  {formatBalance(detail.arrivedAmount, 3) || '--'}
                </Col>
                :
                <Col xl={8} className="mb10">
                  <span className="itemLabel">充值USDT数量：</span>{' '}
                  {formatBalance(detail.number, 2) || '--'}
                </Col>
              }
            </Row>
            <Row gutter={16}>
              {
                detail.transName&& detail.transName.indexOf('USTD') === -1?
                null
                :
                <Col xl={8} className="mb10">
                  <span className="itemLabel">实际充值金额：</span>{' '}
                  {formatBalance(detail.arrivedAmount, 3) || '--'}
                </Col>
              }
              <Col xl={24} className="mb10">
                <span className="itemLabel" style={{ verticalAlign: 'top' }}>
                  审核意见：
                </span>
                { ((detail.transStatus === 1) && edit ===true)  ? (
                  <TextArea
                    placeholder="请输入审核意见"
                    autosize={{ minRows: 3, maxRows: 5 }}
                    style={{ width: '90%' }}
                    onChange={(e) => {changeRemark(e.target.value)}}
                  /> 
                ) : 
                  (detail.auditOpinion) || '--'
                }
              </Col>
            </Row>
          </Card>
          {((detail.transStatus === 1) && edit ===true) ? (
            <div className="btnBox">
              <Button size="large" type="primary" onClick={()=>{handlePass()}}>
                通过
              </Button>
              <Button size="large" type="danger" onClick={()=>{handleRefuse()}}>
                拒绝
              </Button>
            </div>
          ) : (
            ''
          )}
        </div>
      </div>
    </>
  )
}
export default withRouter(PaymentDetail)